<template>
  <div class="auth-modal-box">
    <div class="auth-form">
      <div class="panfish" style="" v-show="isLogin">
        <!--        <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="normal" style="">-->
        <img
          src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png"
          class="greeting"
          ref="greeting"
          style="display: none;"
        />
        <img
          src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png"
          class="blindfold"
          ref="blindfold"
          style="display: none;"
        />
      </div>
      <i
        title="关闭"
        class="close-btn el-icon-close"
        @click="onclick_close"
      ></i>
      <div class="panel" v-if="islogin">
        <h1 class="title">登录</h1>
        <div class="input-group">
          <div class="input-box">
            <input
              autofocus
              v-model="loginForm.nickname"
              @focus="onfocus('greeting')"
              @blur="onblur('greeting')"
              maxlength="64"
              placeholder="请输入用户名"
              class="input"
            />
          </div>
          <div class="input-box">
            <input
              type="password"
              v-model="loginForm.password"
              @focus="onfocus('blindfold')"
              @blur="onblur('blindfold')"
              maxlength="64"
              placeholder="请输入密码"
              class="input"
            />
          </div>
        </div>
        <button class="btn" @click="onclick_doLogin">登录</button>
        <div class="prompt-box">
          没有账号？
          <span class="clickable" @click="islogin = false">注册</span>
        </div>
      </div>
      <div class="panel" v-else>
        <h1 class="title">注册</h1>
        <div class="input-group">
          <div class="input-box">
            <input
              maxlength="20"
              v-model="registerForm.nickname"
              placeholder="请输入用户名"
              class="input"
              autofocus
            />
          </div>
          <div class="input-box">
            <input
              type="password"
              maxlength="64"
              autocomplete="new-password"
              v-model="registerForm.password"
              placeholder="请输入密码（不少于 6 位）"
              class="input"
            />
          </div>
        </div>
        <button class="btn" @click="onclick_doRegister">注册</button>
        <div class="prompt-box text-center" @click="islogin = true">
          <span class="clickable">已有账号登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "md5";

export default {
  name: "AuthForm",
  props: ["isLogin"],
  data() {
    return {
      islogin: this.isLogin,
      registerForm: {
        nickname: "",
        password: "",
      },
      loginForm: {
        nickname: "",
        password: "",
      },
    };
  },
  methods: {
    onfocus(ref) {
      this.$refs[ref].style.display = "block";
    },
    onblur(ref) {
      this.$refs[ref].style.display = "none";
    },
    async onclick_doLogin() {
      if (this.loginForm.nickname.trim().length == 0) {
        return this.$message.error("请填写用户名");
      }
      if (this.loginForm.password.trim().length == 0) {
        return this.$message.error("请填写密码");
      }
      let params = {
        nickname: this.loginForm.nickname,
        password: md5(this.loginForm.password),
      };
      console.log(params);
      let res = await this.$store.dispatch("login", params);
      if (res.code == 0) {
        this.$message.success("登录成功");
        this.$store.dispatch("detail");
        this.$emit("onclose");
      } else {
        this.$message.error(res.message);
      }
    },
    async onclick_doRegister() {
      if (this.registerForm.nickname.trim().length == 0) {
        return this.$message.error("请填写用户名");
      }
      if (this.registerForm.password.trim().length == 0) {
        return this.$message.error("请填写密码");
      }
      let params = {
        nickname: this.registerForm.nickname,
        password: md5(this.registerForm.password),
        avatar:
          "https://gitee.com/sxlm201215/images-pool/raw/master/imgs/2.jpg",
      };
      let res = await this.$http.post("/user/register", params);
      console.log(res);
      if (res.code == 0) {
        this.$message.success("注册成功");
        this.islogin = true;
      } else {
        this.$message.error(res.message);
      }
    },
    onclick_close() {
      this.$emit("onclose");
    },
  },
};
</script>

<style scoped lang="less">
.auth-modal-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2500;

  .auth-form {
    position: relative;
    padding: 2rem;
    width: 26.5rem;
    max-width: 100%;
    font-size: 14px;
    background-color: #fff;
    border-radius: 2px;
    box-sizing: border-box;

    .panfish {
      .normal {
        position: absolute;
        top: 0;
        left: 50%;
        width: 10rem;
        transform: translate(-50%, -83%);
        z-index: 1;
      }

      .greeting {
        position: absolute;
        top: 0;
        left: 50%;
        width: 10rem;
        transform: translate(-50%, -75.8%);
        z-index: 1;
      }

      .blindfold {
        position: absolute;
        top: 0;
        left: 50%;
        width: 8.6rem;
        transform: translate(-50%, -75%);
        z-index: 1;
      }
    }

    .close-btn {
      float: right;
      cursor: pointer;
      opacity: 0.4;
    }

    .panel {
      .title {
        font-size: 1.5rem;
        margin: 0 0 2rem;
      }

      .input-group {
        margin-bottom: 0.5rem;
        overflow: hidden;

        .input-box {
          position: relative;
          margin-bottom: 0.8rem;

          .input {
            padding: 10px;
            width: 100%;
            border: 1px solid #e9e9e9;
            border-radius: 2px;
            outline: none;
            box-sizing: border-box;
          }
        }
      }

      .btn {
        width: 100%;
        height: 40px;
        color: #fff;
        background-color: #007fff;
        border-radius: 2px;
        outline: none;
        box-sizing: border-box;
        cursor: pointer;
      }

      .prompt-box {
        margin: 1rem 0 0;
        color: #767676;

        .clickable {
          color: #007fff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
